<template>
    <div>
        <h2>{{title}}</h2>
        <br />
        <hr />
        <br />
        <div v-html="text"></div>
        <br />
        <Row>
            <Col span="18">
            <Card>
                <Form :label-width="80">
                    <FormItem label="文章标题" :error="articleError">
                        <Input v-model="articleTitle" @on-blur="handleArticletitleBlur" icon="android-list" />
                    </FormItem>
                </Form>
                <div class="margin-top-20">
                    <textarea id="companyVisionEditor"></textarea>
                </div>
            </Card>
            </Col>
            <Col span="6" class="padding-left-10">
            <Card>
                <p slot="title">
                    <Icon type="paper-airplane"></Icon>
                    发布
                </p>
                <Row class="margin-top-20 publish-button-con">
                    <span class="publish-button">
                        <Button @click="handlePreview">预览</Button>
                    </span>
                    <!--
                    <span class="publish-button">
                        <Button @click="handleSaveDraft">保存草稿</Button>
                    </span>
                    -->
                    <span class="publish-button">
                        <Button @click="handlePublish" :loading="publishLoading" icon="ios-checkmark" style="width:90px;" type="primary">发布</Button>
                    </span>
                </Row>
            </Card>
            </Col>
        </Row>
    </div>
</template>

<script>
import tinymce from "tinymce";
export default {
    name: "companyVision_index",
    data() {
        return {
            text: "",
            articleTitle: "",
            articleError: "",
            showLink: false,
            fixedLink: "",
            articlePath: "",
            articlePathHasEdited: false,
            editLink: false,
            editPathButtonType: "ghost",
            editPathButtonText: "编辑",
            articleStateList: [{ value: "草稿" }, { value: "等待复审" }],
            editOpenness: false,
            Openness: "公开",
            currentOpenness: "公开",
            topArticle: false,
            publishTime: "",
            publishTimeType: "immediately",
            editPublishTime: false, // 是否正在编辑发布时间
            articleTagSelected: [], // 文章选中的标签
            articleTagList: [], // 所有标签列表
            classificationList: [],
            classificationSelected: [], // 在所有分类目录中选中的目录数组
            offenUsedClass: [],
            offenUsedClassSelected: [], // 常用目录选中的目录
            classificationFinalSelected: [], // 最后实际选择的目录
            publishLoading: false,
            addingNewTag: false, // 添加新标签
            newTagName: "" // 新建标签名
        };
    },
    methods: {
        handleArticletitleBlur() {
            if (this.articleTitle.length !== 0) {
                // this.articleError = '';
                localStorage.articleTitle = this.articleTitle; // 本地存储文章标题
                if (!this.articlePathHasEdited) {
                    let date = new Date();
                    let year = date.getFullYear();
                    let month = date.getMonth() + 1;
                    let day = date.getDate();
                    this.fixedLink =
                        window.location.host +
                        "/" +
                        year +
                        "/" +
                        month +
                        "/" +
                        day +
                        "/";
                    this.articlePath = this.articleTitle;
                    this.articlePathHasEdited = true;
                    this.showLink = true;
                }
            } else {
                // this.articleError = '文章标题不可为空哦';
                this.$Message.error("文章标题不可为空哦");
            }
        },
        editArticlePath() {
            this.editLink = !this.editLink;
            this.editPathButtonType =
                this.editPathButtonType === "ghost" ? "success" : "ghost";
            this.editPathButtonText =
                this.editPathButtonText === "编辑" ? "完成" : "编辑";
        },
        handleEditOpenness() {
            this.editOpenness = !this.editOpenness;
        },
        handleSaveOpenness() {
            this.Openness = this.currentOpenness;
            this.editOpenness = false;
        },
        cancelEditOpenness() {
            this.currentOpenness = this.Openness;
            this.editOpenness = false;
        },
        handleEditPublishTime() {
            this.editPublishTime = !this.editPublishTime;
        },
        handleSavePublishTime() {
            this.publishTimeType = "timing";
            this.editPublishTime = false;
        },
        cancelEditPublishTime() {
            this.publishTimeType = "immediately";
            this.editPublishTime = false;
        },
        setPublishTime(datetime) {
            this.publishTime = datetime;
        },
        setClassificationInAll(selectedArray) {
            this.classificationFinalSelected = selectedArray.map(item => {
                return item.title;
            });
            localStorage.classificationSelected = JSON.stringify(
                this.classificationFinalSelected
            ); // 本地存储所选目录列表
        },
        setClassificationInOffen(selectedArray) {
            this.classificationFinalSelected = selectedArray;
        },
        handleAddNewTag() {
            this.addingNewTag = !this.addingNewTag;
        },
        createNewTag() {
            if (this.newTagName.length !== 0) {
                this.articleTagList.push({ value: this.newTagName });
                this.addingNewTag = false;
                setTimeout(() => {
                    this.newTagName = "";
                }, 200);
            } else {
                this.$Message.error("请输入标签名");
            }
        },
        cancelCreateNewTag() {
            this.newTagName = "";
            this.addingNewTag = false;
        },
        canPublish() {
            if (this.articleTitle.length === 0) {
                this.$Message.error("请输入文章标题");
                return false;
            } else {
                return true;
            }
        },
        handlePreview() {
            if (this.canPublish()) {
                if (this.publishTimeType === "immediately") {
                    let date = new Date();
                    let year = date.getFullYear();
                    let month = date.getMonth() + 1;
                    let day = date.getDate();
                    let hour = date.getHours();
                    let minute = date.getMinutes();
                    let second = date.getSeconds();
                    localStorage.publishTime =
                        year +
                        " 年 " +
                        month +
                        " 月 " +
                        day +
                        " 日 -- " +
                        hour +
                        " : " +
                        minute +
                        " : " +
                        second;
                } else {
                    localStorage.publishTime = this.publishTime; // 本地存储发布时间
                }
                localStorage.articleTitle = this.articleTitle;
                localStorage.content = tinymce.activeEditor.getContent();
                this.text = localStorage.content;
                this.title = localStorage.articleTitle;
                /*
                  this.$router.push({
                      name: 'preview'
                  });
                  */
            }
        },
        handleSaveDraft() {
            if (!this.canPublish()) {
                //
            }
        },
        async handlePublish() {
            if (this.canPublish()) {
                this.publishLoading = true;
                this.text = localStorage.content = tinymce.activeEditor.getContent();
                this.title = localStorage.articleTitle = this.articleTitle;
                await this.axios.post("/api/companyVision", {
                    data: { title: this.title, text: this.text }
                });
                this.publishLoading = false;
                this.$Notice.success({
                    title: "保存成功",
                    desc: "文章《" + this.articleTitle + "》保存成功"
                });
            }
        },
        handleSelectTag() {
            localStorage.tagsList = JSON.stringify(this.articleTagSelected); // 本地存储文章标签列表
        }
    },
    computed: {
        completeUrl() {
            let finalUrl = this.fixedLink + this.articlePath;
            localStorage.finalUrl = finalUrl; // 本地存储完整文章路径
            return finalUrl;
        }
    },
    async mounted() {
        var res = (await this.axios.get("/api/companyVision")).data
            .message.data;
        this.text = res.text;
        this.title = res.title;
        this.articleTagList = [
            { value: "vue" },
            { value: "iview" },
            { value: "ES6" },
            { value: "webpack" },
            { value: "babel" },
            { value: "eslint" }
        ];
        this.classificationList = [
            {
                title: "Vue实例",
                expand: true,
                children: [
                    {
                        title: "数据与方法",
                        expand: true
                    },
                    {
                        title: "生命周期",
                        expand: true
                    }
                ]
            },
            {
                title: "Class与Style绑定",
                expand: true,
                children: [
                    {
                        title: "绑定HTML class",
                        expand: true,
                        children: [
                            {
                                title: "对象语法",
                                expand: true
                            },
                            {
                                title: "数组语法",
                                expand: true
                            },
                            {
                                title: "用在组件上",
                                expand: true
                            }
                        ]
                    },
                    {
                        title: "生命周期",
                        expand: true
                    }
                ]
            },
            {
                title: "模板语法",
                expand: true,
                children: [
                    {
                        title: "插值",
                        expand: true
                    },
                    {
                        title: "指令",
                        expand: true
                    },
                    {
                        title: "缩写",
                        expand: true
                    }
                ]
            }
        ];
        this.offenUsedClass = [
            {
                title: "vue实例"
            },
            {
                title: "生命周期"
            },
            {
                title: "模板语法"
            },
            {
                title: "插值"
            },
            {
                title: "缩写"
            }
        ];
        tinymce.init({
            selector: "#companyVisionEditor",
            branding: false,
            elementpath: false,
            height: 600,
            language: "zh_CN.GB2312",
            menubar: "edit insert view format table tools",
            theme: "modern",
            plugins: [
                "imageupload advlist autolink lists link image charmap print preview hr anchor pagebreak imagetools",
                "searchreplace visualblocks visualchars code fullscreen fullpage",
                "insertdatetime media nonbreaking save table contextmenu directionality",
                "emoticons paste textcolor colorpicker textpattern imagetools codesample"
            ],
            convert_urls: false,
            imageupload_url: "/api/imgUploadEditor",
            toolbar1:
                " imageupload newnote print fullscreen preview | undo redo | insert | styleselect | forecolor backcolor bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link emoticons media codesample",
            autosave_interval: "20s",
            image_advtab: true,
            table_default_styles: {
                width: "100%",
                borderCollapse: "collapse"
            }
        });
    },
    destroyed() {
        tinymce.get("companyVisionEditor").destroy();
    }
};
</script>


<style scoped>
h2 {
    text-align: center;
}
</style>


